<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Scaling Boundary Demo</title>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
    ></script>

    <script type="text/javascript" src="redist/jquery.3.7.1.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.js"
    ></script>

    <!-- <script type="text/javascript" src="redist/zepto.1.2.0.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.zepto.js"
    ></script> -->

    <link rel="stylesheet" href="stylesheets/base.css" />
    <style>
      figure {
        border: 2px solid #000;
        margin: 2em auto;
        width: 1024px;
        height: 768px;
        background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 0 0 / 2%
          2%;
      }
      th,
      td {
        padding: 10px;
      }
    </style>
    <script>
      $(function () {
        'use strict';

        var $shrink = $('.shrink'),
          $grow = $('.grow'),
          $scalepct = $('#scalepct'),
          $actsize = $('#actsize'),
          $natsize = $('#natsize'),
          $diff = $('#diff'),
          $img = $('img[usemap]'),
          naturalWidth = $img[0].naturalWidth,
          naturalHeight = $img[0].naturalHeight,
          ratio = $img.width() / naturalWidth,
          diffPercent = ($img.width >= naturalWidth ? 1 : -1) + ratio;

        $img.mapster({
          stroke: true,
          strokeWidth: 2,
          strokeColor: '000000',
          strokeOpacity: 0.5,
          fillColor: '000000',
          fillOpacity: 0.1,
          staticState: true,
          scaleMap: true,
          scaleMapBounds: { below: 0.99, above: 1.01 },
          onConfigured: updateDisplay
        });

        function updateDisplay() {
          $scalepct.text(100 * ($img.width() / naturalWidth));
          $diff.text(100 * diffPercent);
          $actsize.text($img.width() + ' x ' + $img.height());
          $natsize.text(naturalWidth + ' x ' + naturalHeight);
        }

        function setDiffPercent(percent) {
          diffPercent = percent;
          $img.mapster(
            'resize',
            Math.round(naturalWidth * (1 + diffPercent)),
            null,
            0,
            updateDisplay
          );
        }

        $shrink.on('click', function () {
          setDiffPercent(diffPercent - parseFloat($(this).data('pct')));
        });

        $grow.on('click', function () {
          setDiffPercent(diffPercent + parseFloat($(this).data('pct')));
        });

        $('#reset').on('click', function () {
          setDiffPercent(0);
        });
      });
    </script>
  </head>
  <body>
    <div class="navmenu">
      Return to <a href="index.html">Main Menu</a>
      <hr />
    </div>
    <h2>Scaling Boundary Demo</h2>

    <div>
      <p>
        When pressing the buttons, the image is resized by the corresponding
        percentage of the images natural size, but the map area is only scaled
        if the percentage of natural size is less than or equal to 99% or
        greater than or equal to 101%.
      </p>
      <p>
        Note - Floating point calculations are not precise which could result in
        otherwise unexpected fractional differences in precision when adjusting
        image size.
      </p>
      <div role="toolbar">
        <div style="padding: 10px">
          <table>
            <tbody>
              <tr>
                <td>Shrink</td>
                <td>
                  <button type="button" class="shrink" data-pct="0.0000000001">
                    0.00000001%
                  </button>
                </td>
                <td>
                  <button type="button" class="shrink" data-pct="0.00001">
                    0.001%
                  </button>
                </td>
                <td>
                  <button type="button" class="shrink" data-pct="0.0001">
                    0.01%
                  </button>
                </td>

                <td>
                  <button type="button" class="shrink" data-pct="0.001">
                    0.1%
                  </button>
                </td>
                <td>
                  <button type="button" class="shrink" data-pct="0.01">
                    1%
                  </button>
                </td>
                <td>
                  <button type="button" class="shrink" data-pct="0.1">
                    10%
                  </button>
                </td>
              </tr>
              <tr>
                <td>Grow</td>
                <td>
                  <button type="button" class="grow" data-pct="0.0000000001">
                    0.00000001%
                  </button>
                </td>
                <td>
                  <button type="button" class="grow" data-pct="0.00001">
                    0.001%
                  </button>
                </td>
                <td>
                  <button type="button" class="grow" data-pct="0.0001">
                    0.01%
                  </button>
                </td>

                <td>
                  <button type="button" class="grow" data-pct="0.001">
                    0.1%
                  </button>
                </td>
                <td>
                  <button type="button" class="grow" data-pct="0.01">1%</button>
                </td>
                <td>
                  <button type="button" class="grow" data-pct="0.1">10%</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div style="display: flex; gap: 10px">
          <button type="button" id="reset" style="margin-right: 10px">
            Reset
          </button>
          <div>
            Percentage Difference: <span id="diff">TBD</span>%<br />
            Percentage of Natural Size: <span id="scalepct">TBD</span>%
          </div>
          <div style="margin-left: 20px">
            Actual Size: <span id="actsize">TBD</span><br />
            Natural Size: <span id="natsize">TBD</span>
          </div>
        </div>
      </div>

      <figure>
        <img
          src=""
          alt="1024 x 768"
          usemap="#imagemap"
        />
      </figure>
      <map name="imagemap">
        <area id="square" shape="rect" coords="812,556,1012,756" href="#" />
      </map>
    </div>
  </body>
</html>
